<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>我的</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<style>
		html,body {background-color: #f9f9f9;width: 100%;padding-bottom: 30px;}
		#app .one_style {width: 100%;height: 280px;position: relative;}
		.header {height: 65px;display: flex;align-items: center;justify-content: space-between;padding-top: 60px;}
		.header_img {display: flex;align-items: center;}
		#app .one_style .bot {width: 100%;height: 225px;padding: 0 15px;box-sizing: border-box;
			background-image: linear-gradient(45deg,#ff5441 0%,#fa5c4a 100%);}
		#app .one_style .bot .my_info {width: 75%;display: flex;align-items: center;}
		#app .one_style .bot .my_info .my_pic {flex-shrink: 0;width: 60px;height: 60px;margin-right: 15px;
			border-radius: 50%;overflow: hidden;}
		#app .one_style .bot .my_info .my_pic img {width: 60px;height: 60px;object-fit: fill;border-radius: 50%;}
		#app .one_style .bot .my_info .my_det {flex-shrink: 1;overflow: hidden;}
		#app .one_style .bot .my_info .my_det .name {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
			color: #ffffff;font-weight: bold;font-size: 18px;margin-bottom: 5px;}
		#app .one_style .bot .my_info .my_det .code {width: 8em;height: 20px;line-height: 18px;background-color: #ffffff;
			border-radius: 30px;display: flex;align-items: center;justify-content: space-between;}
		#app .one_style .bot .my_info .my_det .code .code_num {flex: none;font-size: 15px;color: #ff3a24;padding-left: 7px;}
		#app .one_style .bot .my_info .my_det .code .code_cop {padding: 0 10px;height: 18px;text-align: center;
			line-height: 18px;font-size: 12px;color: #ffffff;background-color: #ff3a24;border-radius: 30px;margin-right: 1px;}
		#app .one_style .roll {margin-top: 10px;width: 200px;height: 22px;background-color: rgba(255, 255, 255, .5);
			border-radius: 40px;display: flex;align-items: center;}
		#app .one_style .roll .roll_img {width: 20px;height: 20px;
			background-color: #f5f5f5;border-radius: 50%;overflow: hidden;}
		#app .one_style .roll .roll_img img {width: 20px;height: 20px;object-fit: fill;}
		#app .one_style .roll span {font-size: 12px;color: #000000;padding-left: 10px;}
		#app .one_style .bot .setting {width: 22px;height: 22px;margin-right: 20px;}
		#app .one_style .bot .setting img {width: 100%;height: 100%;}
		#app .one_style .bot .message {width: 22px;height: 22px;}
		#app .one_style .bot .message img {width: 100%;height: 100%;}
		#app .one_style .top {width: 100%;height: 110px;
			padding: 0 15px;box-sizing: border-box;position: absolute;bottom: 0;left: 0;}
		#app .one_style .top .top_bg {width: 100%;height: 100%;
			padding-top: 25px;box-sizing: border-box;background-color: #ffffff;border-radius: 10px;}
		#app .one_style .top .top_bg .top_total {width: 100%;text-align: center;padding-bottom: 30px;}
		#app .one_style .top .top_bg .top_total .tal_num {font-size: 20px;font-weight: bold;}
		#app .one_style .top .top_bg .top_total .total_num {font-size: 25px;color: #000000;font-weight: bold;}
		#app .one_style .top .top_bg .top_total .total_more {display: flex;
			align-items: center;justify-content: center;line-height: 20px;color: #333333;}
		#app .one_style .top .top_bg .top_total .total_more img {width: 12px;height: 12px;font-size: 0;}
		#app .one_style .top .top_bg .top_total .total_more img:first-child {margin-right: 9px;}
		#app .one_style .top .top_bg .top_total .total_more img:last-child {margin-left: 9px;}
		#app .one_style .top .top_bg .top_det {display: flex;align-items: center;justify-content:space-around;text-align: center;}
		#app .one_style .top .top_bg .top_det .left,.middle,.right {font-size: 14px;color: #000;}
		#app .one_style .top .top_bg .top_det .left .tp {font-size: 18px;font-weight: bold;color: #ff4c41;margin-top: 12px;}
		#app .one_style .top .top_bg .top_det .middle .tp {font-size: 18px;font-weight: bold;color: #ff4c41;margin-top: 12px;}
		#app .one_style .top .top_bg .top_det .right .tp {font-size: 18px;font-weight: bold;color: #ff4c41;margin-top: 12px;}
		/*#app .one_style .top .top_bg .top_det .line {width: 1px;height: 30px;background-color: #e9e9e9;}*/
		.two_style {width: 100%;padding: 0 15px;margin-top: 10px;box-sizing: border-box;}
		.two_style .btnF{width: 100%;padding-top: 12px;background-color: #fff;box-sizing: border-box;
			border-radius: 10px;}
		.two_style .btns {display: flex;flex-wrap: nowrap;justify-content: space-between;padding: 0px 20px 22px;}
		.two_style .btns div img {width: 28px;height: 28px;}
		.two_style .btns div .earn {font-size: 12px;color: #333;margin-top: 5px;}
		.two_style .btns div {display: flex;flex-direction: column;align-items: center;}
		.three_style {width: 100%;padding: 0 15px;margin-top: 10px;box-sizing: border-box;}
		.three_style img{width: 100%;height: auto;}
		/*轮播图*/
		.swipe {overflow: hidden;visibility: hidden;position: relative;box-sizing: border-box;font-size: 0;}
		.swipe-wrap {overflow: hidden;position: relative;}
		.swipe-wrap .swipe-box {float: left;width: 100%;height: 100px;position: relative;}
		.swipe-wrap .swipe-box img {width: 100%;height: 100%;border-radius: 10px;object-fit: fill;}
		.four_style {width: 100%;padding: 0 15px;margin: 10px 0 0 0;box-sizing: border-box;}
		.four_style .enter {padding: 18px 0 22px;box-sizing: border-box;
			width: 100%;background-color: #fff;border-radius: 10px;}
		.four_style .enter .enter_box {width: 100%;box-sizing: border-box;
				display: flex;flex-wrap: nowrap;justify-content: space-between;}
		/*.four_style .enter .enter_box:nth-child(2):after{content: '';flex: auto;}*/
		.four_style .enter .enter_box li {display: flex;flex-direction: column;
			align-items: center;text-align: center;width: 25%}
		.four_style .enter .enter_box li img {width:26px;height: 26px;margin-top: 5px;}
		.four_style .enter .enter_box li span {font-size: 12px;color: #333;margin-top:6px;}
	</style>
</head>
<body>
	<div id="app">
		<div class="one_style">
				<div class="bot">
					<div class="header">
						<div class="my_info" tapmode onclick="opensettingFun()">
							<div class="my_pic">
								<img src="" alt="" class="user_img">
							</div>
							<div class="my_det">
								<div class="name"></div>
							</div>
						</div>
						<div class="header_img">
							<div class="message" tapmode onclick="openExclusiveFun()">
								<img src="../../image/me/me_icon_message.png" alt="">
							</div>
						</div>
					</div>
				</div>
			<div class="top">
				<div class="top_bg" >
					<div class="top_det">
							<div class="left" tapmode onclick="fnMyInfo(3)">
								<div>累计收益</div>
								<div class="tp">0.00</div>
							</div>
							<div class="middle" tapmode onclick="fnMyInfo(2,1)">
								<div>即将到账(元)</div>
								<div class="tp">0.00</div>
							</div>
							<div class="right" tapmode onclick="fnMyInfo(1)">
								<div>可提现(元)</div>
								<div class="tp">0.00</div>
							</div>
					</div>
				</div>
			</div>
		</div>
		<div class="two_style">
			<div class="btnF">
				<p style="height:24px;line-height:24px;display:flex;flex-wrap:nowrap;justify-content:space-between;font-weight:bold;
				padding:0 10px 10px;">
					我的订单
					<span style="font-size:14px;color:#999;font-weight:normal" onclick="fnMyInfo(2,0)" tapmode="">查看全部
							<img style="width:6px;height:12px;vertical-align:middle;padding-bottom:2px;" src="../../image/me/jiantouicon.png" alt="">
					</span>
				</p>
				<div class="btns">
						<div tapmode onclick="fnMyInfo(2,0)">
							<img src="../../image/me/me_icon_income.png" alt="">
							<span class="earn">全部订单</span>
						</div>
						<div tapmode onclick="fnMyInfo(2,1)">
							<img src="../../image/me/me_icon_jjdz.png" alt="">
							<span class="earn">即将到账</span>
						</div>
						<div tapmode onclick="fnMyInfo(2,2)">
							<img src="../../image/me/me_icon_ydz.png" alt="">
							<span class="earn">已到账</span>
						</div>
						<div tapmode onclick="fnMyInfo(2,3)">
							<img src="../../image/me/me_icon_wxdd.png" alt="">
							<span class="earn">无效订单</span>
						</div>
					</div>
			</div>
		</div>
		<div class="three_style" tapmode onclick="openExclusiveFun()">
				<img src="../../image/me/bannergb.png" alt="">
				<!-- <div id='slider' class='swipe'>
						<div class='swipe-wrap'></div>
				</div> -->
		</div>
		<div class="four_style">
			<div class="enter">
					<ul class="enter_box">
						<li tapmode onclick="openCommonProblemFun()">
							<img class="img" src="../../image/me/me_icon_faq.png" alt="">
							<span class="det">常见问题</span>
						</li>
						<li tapmode onclick="openNoticeFun()">
							<img class="img" src="../../image/me/me_icon_notice.png" alt="">
							<span class="det">官方公告</span>
						</li>
						<li tapmode onclick="openExclusiveFun()">
							<img class="img" src="../../image/me/me_icon_service.png" alt="">
							<span class="det">专属客服</span>
						</li>
						<li tapmode onclick="openSuggestionFeedbackFun()">
							<img class="img" src="../../image/me/me_icon_feedback.png" alt="">
							<span class="det">意见反馈</span>
						</li>
				</ul>
				<ul class="enter_box" style="margin-top:15px;">
						<li tapmode onclick="openAboutusFun()">
							<img class="img" src="../../image/me/me_icon_aboutus.png" alt="">
							<span class="det">关于我们</span>
						</li>
						<li tapmode onclick="openFansFun()">
							<img class="img" src="../../image/me/me_icon_fans.png" alt="">
							<span class="det">我的粉丝</span>
						</li>
						<li tapmode onclick="openInvitationFun()">
							<img class="img" src="../../image/me/me_icon_invitation.png" alt="">
							<span class="det">邀请赚钱</span>
						</li>
						<li tapmode onclick="opensettingFun()">
							<img class="img" src="../../image/me/me_icon_setting.png" alt="">
							<span class="det">设置</span>
						</li>
				</ul>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/swipe.js"></script>
<script type="text/javascript">
var member_info;
apiready = function () {
		$api.ajax({
				url: 'api/member/profit_info',
				method: 'get',
		}, function (ret,err) {
				if(ret){
						//累计收益
						$api.text($api.dom(".top_det .left .tp"), ret.data.info.total_income/100  ? api.getGlobalData({key: 'member_info'}).total_income / 100 : "0.00");
						if($api.text($api.dom(".top_det .left .tp")).length>7){
								$api.css($api.dom(".top_det .left .tp"),'font-size:14px');
						}else{
								$api.css($api.dom(".top_det .left .tp"),'font-size:18px');
						}
						//即将到账
						$api.text($api.dom(".top_det .middle .tp"), ret.data.info.entry / 100 ? api.getGlobalData({key: 'member_info'}).entry / 100 : "0.00");
						if($api.text($api.dom(".top_det .middle .tp")).length>7){
								$api.css($api.dom(".top_det .middle .tp"),'font-size:14px');
						}else{
								$api.css($api.dom(".top_det .middle .tp"),'font-size:18px');
						}
						// 可提现
						$api.text($api.dom(".top_det .right .tp"), ret.data.info.wallet / 100 ? api.getGlobalData({key: 'member_info'}).wallet / 100 : "0.00");
						if($api.text($api.dom(".top_det .right .tp")).length>7){
								$api.css($api.dom(".top_det .right .tp"),'font-size:14px');
						}else{
								$api.css($api.dom(".top_det .right .tp"),'font-size:18px');
						}
				}
		})
		// 获取我的收益数据
		api.addEventListener({
		    name: 'accountAmount'
		}, function(ret, err){
		    if( ret ){
						$api.ajax({
								url: 'api/member/profit_info',
								method: 'get',
						}, function (ret,err) {
								if(ret){
										//累计收益
										$api.text($api.dom(".top_det .left .tp"), ret.data.info.total_income/100  ? api.getGlobalData({key: 'member_info'}).total_income / 100 : "0.00");
										if($api.text($api.dom(".top_det .left .tp")).length>7){
												$api.css($api.dom(".top_det .left .tp"),'font-size:14px');
										}else{
												$api.css($api.dom(".top_det .left .tp"),'font-size:18px');
										}
										//即将到账
										$api.text($api.dom(".top_det .middle .tp"), ret.data.info.entry / 100 ? api.getGlobalData({key: 'member_info'}).entry / 100 : "0.00");
										if($api.text($api.dom(".top_det .middle .tp")).length>7){
												$api.css($api.dom(".top_det .middle .tp"),'font-size:14px');
										}else{
												$api.css($api.dom(".top_det .middle .tp"),'font-size:18px');
										}
										// 可提现
										$api.text($api.dom(".top_det .right .tp"), ret.data.info.wallet / 100 ? api.getGlobalData({key: 'member_info'}).wallet / 100 : "0.00");
										if($api.text($api.dom(".top_det .right .tp")).length>7){
												$api.css($api.dom(".top_det .right .tp"),'font-size:14px');
										}else{
												$api.css($api.dom(".top_det .right .tp"),'font-size:18px');
										}
								}
						})
		    }else{
		         console.log(JSON.stringify(err));
		    }
		});
		// 个人中心用户昵称等信息获取
		getMember_info();
		//请求个人中心轮播图列表数据(未完成)
		// getArticle(3);
};
// 个人中心用户昵称等信息获取
function getMember_info() {
		member_info = api.getGlobalData({
				key: 'member_info'
		})
		$api.attr($api.dom(".my_info .my_pic .user_img"), "src", member_info.avatar_url)
		$api.html($api.dom(".my_info .name"), member_info.nick_name);
}

//请求个人中心轮播图列表数据
function getArticle(type) {
		$api.ajax({
				url: 'api/article/list',
				method: 'get',
				data: {
						values: {
								type: type,
						}
				}
		}, function (ret) {
				banner_list = ret.data.list;
				let banner = ""
				ret.data.list.forEach((item, value) => {
					let html = `<div class="swipe-box" onclick="toUrl(` + value + `)">
								<img src="`+ $api.baseUrl + item.pic_url + `" ></div>`
								// $api.html($api.dom(".swipe-wrap"), html);
				});
				window.mySwipe = Swipe($api.byId('slider'), {
					auto: 5000,
					continuous: true,
					callback: function (index, elem) {
					}
				});
		});
}
//轮播图链接跳转
function toUrl(val) {
		let url = banner_list[val].url;
		if (url) {
			jump(url)
		}
}

function fnMyInfo(index_ , itemIndex) {
		// 参数为1时跳转提现页面
		if(index_ == 1) {
				api.openTabLayout({
					name: 'income_withdraw',
					url: '../me/my/income_withdraw.html',
					useWKWebView: true,
					bgColor: '#fff',
				})
		}else if(index_ == 2){ //查看我的订单
				api.openTabLayout({
						name: 'myOrder',
						url: './my/myOrder_win.html',
						useWKWebView: true,
						bgColor: '#fff',
						pageParam:{
								index:itemIndex
						},
				});
		}else if (index_ == 3) {
				api.openTabLayout({
						name: 'my_income',
						url: '../me/my/my_income.html',
						useWKWebView: true,
						bgColor: '#fff',
				});
		}
}
// // 打开我的消息页面
// function openMessage() {
// 		api.openTabLayout({
// 				name: 'message_index',
// 				url: '../home/message_index.html',
// 				useWKWebView: true,
// 				bgColor: '#fff',
// 		});
// }
//打开常见问题公告
function openCommonProblemFun(){
		api.openTabLayout({
				name: 'commonProblem',
				url: '../me/commonProblem_win.html',
				useWKWebView: true,
				bgColor: '#fff',
		});
}
// 打开官方公告页面
function openNoticeFun() {
		api.openTabLayout({
				name: 'notice',
				url: '../me/notice.html',
				useWKWebView: true,
				bgColor: '#fff',
		});
}
//打开专属客服页面
function openExclusiveFun(){
		api.openTabLayout({
				name: 'exclusive',
				url: '../me/exclusive.html',
				useWKWebView: true,
				bgColor: '#fff',
		});
}
// 打开意见反馈
function openSuggestionFeedbackFun() {
		api.openTabLayout({
				name: 'suggestionFeedback',
				url: '../me/suggestionFeedback.html',
				useWKWebView: true,
				bgColor: '#fff',
		});
}
// 打开关于我们页面
function openAboutusFun(){
		api.openTabLayout({
				name: 'about_us',
				url: '../me/setting/about_us.html',
				useWKWebView: true,
				bgColor: '#fff',
		})
}
// 打开我的粉丝页面
function openFansFun(){
		api.openTabLayout({
				name: 'my_fans',
				url: '../me/my/my_fans.html',
				useWKWebView: true,
				bgColor: '#fff',
		});
}
// 打开邀请赚钱页面
function openInvitationFun(){
		api.openFrame({
				reload: true,
				name: 'me_fx',
				url: './me_fx.html',
				bgColor: "rgba(0,0,0,0)",
				animation: {
						type: "movein",
						subType: "from_bottom",
						duration: 300
				},
		});
}
// 打开设置页面
function opensettingFun() {
		api.openTabLayout({
				name: 'setting',
				url: '../me/setting/setting.html',
				useWKWebView: true,
				bgColor: '#fff',
		});
}
</script>
</html>
